<template>
  <div class="storelocation_module">
    <el-form :model="fromData" ref="storelocationRef">
      <el-row>
        <!-- 联系地址 -->
        <el-col :span="6">
          <el-form-item label="联系地址" prop="contactAddress">
            <AddressCascader v-model="fromData.contactAddress" @getLabels="getLabels"></AddressCascader>
          </el-form-item>
        </el-col>
        
      </el-row>
      <el-row>
        <!-- 详细地址 -->
        <el-col>
          <el-form-item :label="$t('clueInformation_detailedAddress')" prop="detailedAddress">
            <el-col :span="8">
              <el-input v-trim v-model="fromData.detailedAddress"></el-input>
            </el-col>
            <!-- 地图搜索 -->
            <el-col :span="4" >
              <el-button class="ml10" type="primary" @click="searchMap">{{ $t("storeManagement_searchMap") }}</el-button>
            </el-col>
          </el-form-item>
         </el-col>
          <el-col>
            <selfMap ref="storelocationMapRef" v-model="addressFull" :placeName="placeName"></selfMap>
          </el-col>
      </el-row>

      <el-row>
        <el-col :span="20" class="flex justify_end mt10">
          <!-- 确定 -->
          <el-button type="primary">{{ $t("btn_ok") }}</el-button>
          <!-- 取消 -->
          <el-button @click="resetForm(storelocationRef)">{{ $t("btn_cancel") }}</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script lang="ts">
// 店铺地址
import { defineComponent,ref } from "vue";
import { StoreLocaltionFormDataType } from "../../../viewModel/storeManagement/storeManagement"
import { FormInstance } from "element-plus";
export default defineComponent({
  setup() {
    const fromData = ref<StoreLocaltionFormDataType>( new StoreLocaltionFormDataType())
    const storelocationRef = ref<FormInstance>()
    const storelocationMapRef = ref()
    let address = ""
    const getLabels = (payload: string[]) => {
      address = payload.join("")
    }
    const addressFull = ref("")
    const placeName = ref("")
    addressFull.value = "武汉大学"
    placeName.value = addressFull.value
   
    const searchMap = () => {
      let addressAll = address + fromData.value.detailedAddress
      if (storelocationMapRef.value && storelocationMapRef.value.searchMap) {
        storelocationMapRef.value.searchMap(addressAll)
      }
    }
    
    const resetForm = (formEl: FormInstance | undefined) => {
      if (!formEl) return;
      formEl.resetFields();
      addressFull.value = ""
    }
    return {
      fromData,
      searchMap,
      storelocationRef,
      storelocationMapRef,
      getLabels,
      addressFull,
      resetForm,
      placeName
    };
  },
});
</script>
<style scoped></style>
